<template>
  <div class="page changePhone">
    <div class="scroll-view">
      <customHeader :middleTitle="title"></customHeader>
      <div class="page-body">
        <div class="step" v-show="step1Visible">
          <div class="tip">为了保护您的账号安全，操作前请您进行安全验证</div>
          <ul class="mine-options">
            <li class="option-item">
              <span class="left">手机号码</span>
              <span class="right">{{formateOldMobile}}</span>
            </li>
            <li class="option-item">
              <span class="left">验证码</span>
              <span class="right">
                <inputClear
                  type="text"
                  warpClass="changePhone-input"
                  v-model="verifyCode"
                  placeholder="请填写验证码"
                  maxlength="6"
                />
                <span class="get-code" v-show="show" @click="getCode">发送验证码</span>
                <span class="get-code disabled" v-show="!show">{{count}}s 后重新发送</span>
              </span>
            </li>
          </ul>
          <div class="btn-wrap">
            <div class="btn" :class="{disabled:!verifyCode}" @click="nextStep">下一步</div>
          </div>
          <div class="tip">如遇到问题请联系客服人员为您人工解决</div>
        </div>
        <div class="step" v-show="!step1Visible">
          <ul class="mine-options">
            <li class="option-item">
              <span class="left">新手机号</span>
              <span class="right">
                <inputClear
                  type="tel"
                  warpClass="changePhone-input"
                  v-model="phoneNum"
                  placeholder="请填写手机号码"
                  maxlength="11"
                />
              </span>
            </li>
            <li class="option-item">
              <span class="left">验证码</span>
              <span class="right">
                <inputClear
                  type="text"
                  warpClass="changePhone-input"
                  v-model="verifyCode2"
                  placeholder="请填写验证码"
                  maxlength="6"
                />
                <span class="get-code" v-show="show2" @click="getCode2">发送验证码</span>
                <span class="get-code disabled" v-show="!show2">{{count2}}s 后重新发送</span>
              </span>
            </li>
          </ul>
          <div class="btn-wrap">
            <div class="btn" :class="{disabled:!(this.phoneNum && this.verifyCode2)}" @click="submit">提交</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import inputClear from "../../components/inputClear/inputClear";
import { Toast } from "mint-ui";

export default {
  name: "changePhone",
  data() {
    return {
      title: "手机验证",
      step1Visible: true,
      oldMobile: "",
      formateOldMobile: "",
      phoneNum: "",
      verifyCode: "",
      verifyCode2: "",
      waitTime: 0,
      waitTime2: 0,
      count: 60,
      count2: 60,
      timer: null,
      timer2: null,
      show: true,
      show2: true,
      preventAgainSend: true,
      preventAgainSend2: true
    };
  },
  methods: {
    nextStep() {
      if (!this.verifyCode) {
        Toast("请输入验证码");
        return;
      }
      this.nextStepReq(() => {
        this.step1Visible = false;
        this.title = "修改手机号码";

        //reset
        window.clearInterval(this.timer);
        this.timer = null;
        this.count = 60;
      });
    },
    nextStepReq(callBack) {
      this.ajax({
        type: "get",
        url: `newapp/setting/verifyCodeToOldPhone.do?phone=${this.oldMobile}&verifyCode=${this.verifyCode}`,
        controlLoading: true
      })
        .then(res => {
          if (res.success) {
            callBack && callBack();
          } else {
            Toast(res.msg);
          }
        })
        .catch(err => {

        });
    },

    // 60s倒计时
    countDown() {
      const timeCount = 60;
      if (!this.timer) {
        this.count = timeCount;
        this.show = false;
        this.timer = window.setInterval(() => {
          if (this.count > 0 && this.count <= timeCount) {
            this.count--;
            this.preventAgainSend = false;
          } else {
            this.show = true;
            window.clearInterval(this.timer);
            this.timer = null;
            this.preventAgainSend = true;
          }
        }, 1000);
      }
    },
    // 60s倒计时
    countDown2() {
      const timeCount = 60;
      if (!this.timer2) {
        this.count2 = timeCount;
        this.show2 = false;
        this.timer2 = window.setInterval(() => {
          if (this.count2 > 0 && this.count2 <= timeCount) {
            this.count2--;
            this.preventAgainSend2 = false;
          } else {
            this.show2 = true;
            window.clearInterval(this.timer2);
            this.timer2 = null;
            this.preventAgainSend2 = true;
          }
        }, 1000);
      }
    },
    check4SendVerifyCode(phoneNum) {
      var regex = /^1\d{10}$/;
      if (!this.phoneNum) {
        Toast("请输入手机号");
        return false;
      } else if (!regex.test(this.phoneNum)) {
        Toast("请输入正确的手机号");
        return false;
      }
      return true;
    },

    //手机验证发送验证码
    getCode() {
      if (!this.oldMobile) {
        Toast("未获取到手机号");
        return false;
      }
      if (!this.preventAgainSend) {
        return;
      }
      if (this.waitTime == 0) {
        this.ajax({
          type: "post",
          data: {
            phoneNum: this.oldMobile
          },
          url: "newapp/setting/sendCodeToOldPhone.do",
          controlLoading: true
        })
          .then(res => {
            if (res.success) {
              this.countDown();
              Toast("发送短信验证码成功！");
            } else {
              Toast(res.msg);
            }
          })
          .catch(err => {
     
          });
      }
    },
    //新手机号获取验证码
    getCode2() {
      if (!this.check4SendVerifyCode()) {
        return false;
      }
      if (!this.preventAgainSend2) {
        return;
      }
      if (this.waitTime2 == 0) {
        this.ajax({
          type: "post",
          data: {
            phoneNum: this.phoneNum
          },
          url: "newapp/setting/sendVerifyCodeModifyPhone.do",
          controlLoading: true
        })
          .then(res => {
            if (res.success) {
              this.countDown2();
              Toast("发送短信验证码成功！");
            } else {
              Toast(res.msg);
            }
          })
          .catch(err => {
   
          });
      }
    },
    submit() {
      if (this.phoneNum && this.verifyCode2) {
        this.ajax({
          type: "post",
          data: {
            verifyCode: this.verifyCode2,
            phoneNum: this.phoneNum
          },
          url: "newapp/setting/modifyPhoneNumVerifyOldPhone.do",
          controlLoading: true
        })
          .then(res => {
            if (res.success) {
               localStorage.clear();
               AppUtil.call(AppUtil.APIS.LOGOUT);
            
            } else {
              Toast(res.msg);
            }
          })
          .catch(err => {
  
          });
      }
    },
    getUserInfo() {
      this.ajax({
        url: "/newapp/employee/info.do",
        type: "get"
      })
        .then(result => {
          if (result.success) {
            const data = result.resultObject;
            this.oldMobile = data.mobile;
            this.formateOldMobile = window.CommonUtil.secretShowMobile(
              data.mobile
            );
          } else {
            Toast(result.msg);
          }
        })
        .catch(function(err) {

        });
    }
  },
  created() {
    this.getUserInfo();
  },
  components: {
    customHeader,
    inputClear
  }
};
</script>
<style lang='scss' scoped>
@import "changePhone";
</style>
<style lang="scss">
@import "../../style/public";
.changePhone-input {
  text-align: right !important;
  @include remCalc(font-size, 28, !important);
}
</style>
